<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" i>
<title>老师表格</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" th:href="@{css/materialdesignicons.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{css/animate.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{css/style.min.css}">
  <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" media="all">
</head>

<body>
<script id="barCar" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>

<script id="toolbarMenu" type="text/html">
    <div class="layui-btn-container"  >
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="menuAdd" >添加</button>
    </div>
</script>

<div th:include="comm/comm.html"></div>
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid p-t-15">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <header class="card-header"><div class="card-title">表格</div></header>
              <div class="card-body">
                <h6>基本实例</h6>
                  <table id="demo" lay-filter="test" ></table>

                  <div style="display: none;padding: 20px" id="saveOrUpdateDiv">
                      <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
                          <div class="layui-col-md12 layui-col-xs12">
                              <div class="layui-row layui-col-space10">
                                  <div class="layui-col-md9 layui-col-xs7">
                                      <div class="layui-form-item magt3">
                                          <label class="layui-form-label">id:</label>
                                          <div class="layui-input-block" style="padding: 5px">
                                              <input type="text" readonly name="tid" class="layui-input" placeholder="id" >
                                          </div>
                                      </div>
                                      <div class="layui-form-item magt3">
                                          <label class="layui-form-label">姓名:</label>
                                          <div class="layui-input-block" style="padding: 5px">
                                              <input type="text" name="tname" id="carnumber" autocomplete="off" class="layui-input"
                                                     lay-verify="required"
                                                     placeholder="姓名" style="height: 30px;border-radius: 10px">
                                          </div>
                                      </div>
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">电话:</label>
                                          <div class="layui-input-block" style="padding: 5px">
                                              <input type="text" name="phone" autocomplete="off" class="layui-input"
                                                     placeholder="电话" style="height: 30px;border-radius: 10px">
                                          </div>
                                      </div>
                                      <div class="layui-inline">
                                          <label class="layui-form-label">班级:</label>
                                          <div class="layui-input-inline">
                                              <input type="radio" name="cid" value="1" title="一班">
                                              <input type="radio" name="cid" value="2" checked="checked" title="二班">
                                              <input type="radio" name="cid" value="3" title="三班">
                                              <input type="radio" name="cid" value="4" title="四班">
                                          </div>
                                      </div>
                                  <div class="layui-inline">
                                      <label class="layui-form-label">性别:</label>
                                      <div class="layui-input-inline">
                                          <input type="radio" name="tsex" value="1" title="男">
                                          <input type="radio" name="tsex" value="0" checked="checked" title="女">
                                      </div>
                                  </div>
                              </div>
                              <div class="layui-form-item magb0">
                                  <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                                      <button type="button"
                                              class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                                              lay-filter="doSubmit" lay-submit>提交
                                      </button>
                                      <button type="reset"
                                              class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">
                                          重置
                                      </button>
                                  </div>
                              </div>
                          </div>
                          </div>
                      </form>
                  </div>

              </div>
            </div>
          </div>

        </div>

      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="layui-v2.5.6/layui/layui.js"></script>
<script th:src="@{https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js}"></script>
<script type="text/javascript">
    L2Dwidget.init({
        "model": { "jsonPath":" https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
        "display": { "position": "right", "width": 200, "height": 200, "hOffset": 0, "vOffset": 0 },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 }
    });

</script>
<script>
    layui.use(['layer','jquery','table','form'], function(){
        var layer = layui.layer,
            table = layui.table;
        form = layui.form;
        $ = layui.jquery,
        table.render({
            elem: '#demo'
            ,id: "user"
            ,cellMinWidth: 80
            ,url: 'teacherall' //数据接口
            ,cols: [
                [ //表头
                     {type: 'checkbox', fixed: 'left'}
                ,{field: 'tname', title: '姓名', width:150}
                ,{field: 'tsex', title: '性别', width:150, templet:function (data) {
                            return data.tsex == "1" ? "男":"女";}}
                ,{field: 'phone', title: '电话', width:150}
                ,{field: 'cid', title: '班级', width:150, templet:function (data) {
                    if (data.cid=="1"){
                        return "一班";
                    } else  if (data.cid=="2"){
                        return "二班";
                    }
                        if (data.cid=="3"){
                            return "三班";
                        }else {
                            return "四班";
                        }
                       }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barCar', width:250}]
            ]
            ,page: ['5','10']
            ,limit:5
            ,toolbar: '#toolbarMenu'
        });


        function add(){
            openIndex =  layer.open({
                type:1
                ,content:$('#saveOrUpdateDiv')
                ,title:"菜单添加"
                ,area:['800px', '450px']
                , offset: '50px'
                ,success:function (layero, index) {
                    // 清除表单的内容
                    $("#dataFrm").get(0).reset()
                    form.render()
                    url = "teacheradd"
                }
            })
        }
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'menuAdd':
                    add()
                    break;

            };
        });

        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    del(data.tid);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                edit(data)
            };
        })
        form.on("submit(doSubmit)",function (data) {
            $.post(url,data.field,function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 关闭当前弹出框
                    layer.close(openIndex)
                    table.reload("user",{
                        page:{
                            curr:1
                        }
                    })
                });
            })

            return false;
        })
        function del(tid) {
            $.post("teacherdelete",{"tid":tid },function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 刷新table
                    table.reload('user',{
                        page:{curr:1}
                    })
                });
            })
        }
        function edit(data) {
            openIndex = layer.open({
                type:1
                ,content: $('#saveOrUpdateDiv')
                ,title:"菜单修改"
                ,area:['800px', '450px']
                , offset: '10px'
                ,success:function () {
                    form.val('dataFrm',data)
                    $('[name="tid"]').val(data.tid)
                    form.render()
                    url = "teacherup"
                }
            })
        }

    });
</script>

</html>